<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' />
    <meta
      name='viewport'
      content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
    />
    <title>config WiFi</title>
    <style>
      body {
        margin: 30px 15px;
      }
      .fc {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      button {
        width: 40%;
        border-radius: 5px;
        height: 40px;
        background: none;
        border: 1px solid green;
        font-size: 20px;
        justify-content: space-evenly;
        color: green;
      }
      button:active {
        background: #ccc;
      }
      .t {
        justify-content: center;
        height: 10%;
        font-size: 35px;
        color: #0008;
        letter-spacing: 5px;
      }
      .cint {
        height: 20%;
        max-height: 20%;
        display: flex;
        flex-direction: column;
      }
      .itxt {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-evenly;
        font-size: 20px;
        color: #ccc;
      }
      input {
        width: 76%;
        line-height: 30px;
        font-size: 25px;
        margin-top: 15px;
        border-style: none none solid none;
      }
      .cb {
        margin-top: 15px;
      }
    </style>
  </head>
  <body>
    <div class='fc t'>配置WiFi</div>
    <div class='cint'>
      <div class='itxt'>SSID:<input id='ssid' type='text' value='' /></div>
      <div class='itxt'>密码:<input id='pwd' type='text' value='' /></div>
    </div>
    <div class='fc cb'>
      <button class='fc button' onclick='cntwf()'>提 交</button>
    </div>
  </body>
  <script>
    var c=1;
    function cntwf() {
      var s = document.getElementById('ssid').value;
      if (!s) {
        alert('bad arg');
        return;
      }
      var pwd = document.getElementById('pwd').value;
      var ajax = new XMLHttpRequest();
      ajax.open('get', '/cnt?c='+c+'&ssid=' + window.btoa(unescape(encodeURIComponent(s))) + '&pwd=' + window.btoa(unescape(encodeURIComponent(pwd))));
      ajax.send();
      c=c+1;
      ajax.onreadystatechange = function () {
        alert(ajax.response||'连接可能失败');
      };
    }
  </script>
</html>